<template>
  <view class="links-page">
    <!-- 顶部标题 -->
    <view class="header-section">
      <text class="page-title">页面导航</text>
      <text class="page-subtitle">快速访问所有页面</text>
    </view>

    <!-- 页面链接列表 -->
    <view class="links-container">
      <!-- 主要功能页面 -->
      <view class="section">
        <text class="section-title">主要功能页面</text>
        <view class="links-grid">
          <view 
            class="link-item" 
            v-for="page in mainPages" 
            :key="page.path"
            @click="navigateToPage(page.path)"
          >
            <view class="link-icon">
              <text class="iconfont-v2" :class="page.icon"></text>
            </view>
            <text class="link-name">{{ page.name }}</text>
            <text class="link-desc">{{ page.description }}</text>
          </view>
        </view>
      </view>

      <!-- 用户相关页面 -->
      <view class="section">
        <text class="section-title">用户相关页面</text>
        <view class="links-grid">
          <view 
            class="link-item" 
            v-for="page in userPages" 
            :key="page.path"
            @click="navigateToPage(page.path)"
          >
            <view class="link-icon">
              <text class="iconfont-v2" :class="page.icon"></text>
            </view>
            <text class="link-name">{{ page.name }}</text>
            <text class="link-desc">{{ page.description }}</text>
          </view>
        </view>
      </view>

      <!-- 商品相关页面 -->
      <view class="section">
        <text class="section-title">商品相关页面</text>
        <view class="links-grid">
          <view 
            class="link-item" 
            v-for="page in productPages" 
            :key="page.path"
            @click="navigateToPage(page.path)"
          >
            <view class="link-icon">
              <text class="iconfont-v2" :class="page.icon"></text>
            </view>
            <text class="link-name">{{ page.name }}</text>
            <text class="link-desc">{{ page.description }}</text>
          </view>
        </view>
      </view>

      <!-- 教育相关页面 -->
      <view class="section">
        <text class="section-title">教育相关页面</text>
        <view class="links-grid">
          <view 
            class="link-item" 
            v-for="page in educationPages" 
            :key="page.path"
            @click="navigateToPage(page.path)"
          >
            <view class="link-icon">
              <text class="iconfont-v2" :class="page.icon"></text>
            </view>
            <text class="link-name">{{ page.name }}</text>
            <text class="link-desc">{{ page.description }}</text>
          </view>
        </view>
      </view>

      <!-- 系统设置页面 -->
      <view class="section">
        <text class="section-title">系统设置页面</text>
        <view class="links-grid">
          <view 
            class="link-item" 
            v-for="page in systemPages" 
            :key="page.path"
            @click="navigateToPage(page.path)"
          >
            <view class="link-icon">
              <text class="iconfont-v2" :class="page.icon"></text>
            </view>
            <text class="link-name">{{ page.name }}</text>
            <text class="link-desc">{{ page.description }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部统计信息 -->
    <view class="footer-info">
      <text class="total-count">共 {{ totalPages }} 个页面</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 主要功能页面
      mainPages: [
        {
          path: '/pages/fast/index',
          name: '首页',
          description: '应用主页面',
          icon: 'icon-shouye'
        },
        {
          path: '/pages/fast/login',
          name: '登录',
          description: '用户登录页面',
          icon: 'icon-denglu'
        },
        {
          path: '/pages/fast/register',
          name: '注册',
          description: '用户注册页面',
          icon: 'icon-zhuce'
        },
        {
          path: '/pages/fast/secondhand',
          name: '二手市场',
          description: '二手商品交易',
          icon: 'icon-er'
        }
      ],

      // 用户相关页面
      userPages: [
        {
          path: '/pages/fast/my',
          name: '我的',
          description: '个人中心页面',
          icon: 'icon-wode'
        },
        {
          path: '/pages/fast/message',
          name: '消息',
          description: '用户消息中心',
          icon: 'icon-xiaoxi'
        },
        {
          path: '/pages/fast/settings',
          name: '设置',
          description: '用户设置页面',
          icon: 'icon-shezhi'
        },
        {
          path: '/pages/fast/my-address-list',
          name: '我的地址',
          description: '地址管理页面',
          icon: 'icon-dizhi'
        },
        {
          path: '/pages/fast/add-address',
          name: '添加地址',
          description: '新增地址页面',
          icon: 'icon-tianjia'
        },
        {
          path: '/pages/fast/add-address-new',
          name: '新增地址',
          description: '新版本地址添加',
          icon: 'icon-tianjia'
        }
      ],

      // 商品相关页面
      productPages: [
        {
          path: '/pages/fast/product-detail',
          name: '商品详情',
          description: '商品详细信息',
          icon: 'icon-shangpin'
        },
        {
          path: '/pages/fast/product-publish',
          name: '发布商品',
          description: '发布新商品',
          icon: 'icon-fabu'
        },
        {
          path: '/pages/fast/secondhand-publish',
          name: '发布二手产品',
          description: '发布二手商品',
          icon: 'icon-fabu'
        },
        {
          path: '/pages/fast/product-review',
          name: '商品评价',
          description: '商品评价页面',
          icon: 'icon-pingjia'
        },
        {
          path: '/pages/fast/shopping-cart',
          name: '购物车',
          description: '购物车页面',
          icon: 'icon-gouwuche'
        },
        {
          path: '/pages/fast/checkout',
          name: '结账',
          description: '订单结算页面',
          icon: 'icon-jiesuan'
        },
        {
          path: '/pages/fast/payment',
          name: '支付',
          description: '支付页面',
          icon: 'icon-zhifu'
        }
      ],

      // 教育相关页面
      educationPages: [
        {
          path: '/pages/fast/training',
          name: '培训',
          description: '培训课程页面',
          icon: 'icon-peixun'
        },
        {
          path: '/pages/fast/training-list',
          name: '培训列表',
          description: '培训课程列表',
          icon: 'icon-liebiao'
        },
        {
          path: '/pages/fast/course-category',
          name: '课程分类',
          description: '课程分类页面',
          icon: 'icon-fenlei'
        },
        {
          path: '/pages/fast/course-detail',
          name: '课程详情',
          description: '课程详细信息',
          icon: 'icon-kecheng'
        },
        {
          path: '/pages/fast/course-publish',
          name: '发布课程',
          description: '发布新课程',
          icon: 'icon-fabu'
        },
        {
          path: '/pages/fast/teacher-list',
          name: '老师列表',
          description: '教师列表页面',
          icon: 'icon-laoshi'
        },
        {
          path: '/pages/fast/teacher-detail',
          name: '老师详情',
          description: '教师详细信息',
          icon: 'icon-laoshi'
        },
        {
          path: '/pages/fast/thesis-guidance',
          name: '论文指导',
          description: '论文指导页面',
          icon: 'icon-lunwen'
        },
        {
          path: '/pages/fast/thesis-detail',
          name: '论文详情',
          description: '论文详细信息',
          icon: 'icon-lunwen'
        },
        {
          path: '/pages/fast/thesis-help-publish',
          name: '发布论文求助',
          description: '发布论文求助信息',
          icon: 'icon-fabu'
        },
        {
          path: '/pages/fast/expert-add',
          name: '添加专家',
          description: '新增论文导师信息',
          icon: 'icon-fabu'
        }
      ],

      // 系统设置页面
      systemPages: [
        {
          path: '/pages/fast/job-detail',
          name: '职位详情',
          description: '招聘职位详情',
          icon: 'icon-zhiwei'
        },
        {
          path: '/pages/fast/job-publish',
          name: '发布岗位',
          description: '发布新岗位',
          icon: 'icon-fabu'
        },
        {
          path: '/pages/fast/company',
          name: '公司信息',
          description: '公司信息页面',
          icon: 'icon-gongsi'
        },
        {
          path: '/pages/fast/order-list',
          name: '订单列表',
          description: '用户订单列表',
          icon: 'icon-dingdan'
        },
        {
          path: '/pages/fast/order-detail',
          name: '订单详情',
          description: '订单详细信息',
          icon: 'icon-dingdan'
        },
        {
          path: '/pages/fast/add-comment',
          name: '添加评价',
          description: '添加商品评价',
          icon: 'icon-pingjia'
        }
      ]
    }
  },
  computed: {
    totalPages() {
      return this.mainPages.length + 
             this.userPages.length + 
             this.productPages.length + 
             this.educationPages.length + 
             this.systemPages.length;
    }
  },
  methods: {
    navigateToPage(path) {
      console.log('导航到页面:', path);
      
      // 显示加载提示
      uni.showLoading({
        title: '跳转中...'
      });
      
      // 延迟跳转，让用户看到加载效果
      setTimeout(() => {
        uni.hideLoading();
        
        // 使用 uni.navigateTo 跳转到指定页面
        uni.navigateTo({
          url: path,
          fail: (err) => {
            console.error('页面跳转失败:', err);
            uni.showToast({
              title: '页面跳转失败',
              icon: 'none'
            });
          }
        });
      }, 300);
    }
  }
}
</script>

<style lang="scss" scoped>
.links-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: 40rpx;
}

.header-section {
  padding: 60rpx 40rpx 40rpx;
  text-align: center;
  color: white;

  .page-title {
    font-size: 48rpx;
    font-weight: 700;
    margin-bottom: 16rpx;
    display: block;
  }

  .page-subtitle {
    font-size: 28rpx;
    opacity: 0.9;
    display: block;
  }
}

.links-container {
  padding: 0 40rpx;

  .section {
    margin-bottom: 40rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: white;
      margin-bottom: 24rpx;
      display: block;
      padding-left: 20rpx;
      border-left: 6rpx solid rgba(255, 255, 255, 0.8);
    }

    .links-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;

      .link-item {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 24rpx;
        padding: 30rpx 24rpx;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

        &:hover {
          transform: translateY(-8rpx);
          box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.15);
          background: white;
        }

        &:active {
          transform: translateY(-4rpx);
        }

        .link-icon {
          width: 80rpx;
          height: 80rpx;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 16rpx;

          .iconfont-v2 {
            font-size: 36rpx;
            color: white;
          }
        }

        .link-name {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
        }

        .link-desc {
          font-size: 22rpx;
          color: #666;
          line-height: 1.4;
          display: block;
        }
      }
    }
  }
}

.footer-info {
  text-align: center;
  padding: 40rpx;
  margin-top: 20rpx;

  .total-count {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
    padding: 16rpx 32rpx;
    border-radius: 40rpx;
    backdrop-filter: blur(10rpx);
  }
}

// 响应式适配
@media (max-width: 750rpx) {
  .links-container .section .links-grid {
    grid-template-columns: 1fr;
  }
}

// 动画效果
.link-item {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 为不同section添加延迟动画
.section:nth-child(1) .link-item { animation-delay: 0.1s; }
.section:nth-child(2) .link-item { animation-delay: 0.2s; }
.section:nth-child(3) .link-item { animation-delay: 0.3s; }
.section:nth-child(4) .link-item { animation-delay: 0.4s; }
.section:nth-child(5) .link-item { animation-delay: 0.5s; }
</style>
